<template>
  <div class="ksd-container showcase-layout">
    <div class="login-page-new__main-bg"></div>
    <div class="showcase-home">
      <div class="showcase-home-hero isLoaded">
        <div class="container">
          <div class="content">
            <div class="showcase-header">
              <div class="title">Pug Design</div>
              <div class="desc">天行健，君子以自强不息 / 独立开发者之路</div>
            </div>
            <div class="cass animate__animated "></div>
            <div class="showcase-home-hero-register showcase-home-hero-login">
              <div class="content">
                <div class="field white outline transparent blur big"><input class="input text" autofocus type="text"
                                                                             maxlength="30" v-model.trim="user.username"
                                                                             ref="username" placeholder="用户" @keydown.enter="toLogin"></div>
                <div class="field white outline transparent blur big"><input class="input text" type="password"
                                                                             ref="password"
                                                                             v-model.trim="user.password" maxlength="16"
                                                                             placeholder="密码" @keydown.enter="toLogin"></div>
                <div class="field white outline transparent blur big" style="position: relative"><input
                  class="input text" type="text" ref="code" v-model.trim="user.code" maxlength="4" placeholder="验证码"
                  @keydown.enter="toLogin">
                  <img :src="captchaObj.img"
                       alt=""
                       title="点击更换"
                       @click="changecode"
                       style="position: absolute;right:5px;top:4px;">
                </div>
                <input type="hidden" v-model="user.uuid">
                <div class="action">
                  <button @click="toLogin" style="width: 100%;" class="button outline white transparent blur big block">
                    立即登录
                  </button>
                  <transition
                    enter-active-class="animated fadeInDown"
                    leave-active-class="animated fadeOutUp"><p class="c333"
                                                               style="height: 20px;text-align: center;padding-top: 10px"
                                                               v-show="show">{{
                      info
                    }}</p></transition>
                </div>
              </div>
              <!--              <div class="footer">-->
              <!--                <div class="action">-->
              <!--                  <a href="/wxlogin" class="button basic">← 微信登录</a>-->
              <!--                  <a href="/reg" class="button basic">注册 →</a>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
            <div class="showcase-home-hero-footer">
              <div class="ant-pro-global-footer cof">
                <div class="ant-pro-global-footer-links"><a title="Pug Pro" target="_blank" href="https://www.txnh.net">Pug
                  Desgin</a><a title="gitee" target="_blank"
                               href="https://gitee.com/kekesam/kuangstudy-pug-ui.git"><span role="img"
                                                                                            aria-label="github"
                                                                                            class="anticon anticon-github"><svg
                  viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em"
                  fill="currentColor" aria-hidden="true"><path
                  d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></span></a><a
                  title="Pug" target="_blank" href="https://ant.design">Pug</a></div>
                <div class="ant-pro-global-footer-copyright"><span role="img" aria-label="copyright"
                                                                   class="anticon anticon-copyright"><svg
                  viewBox="64 64 896 896" focusable="false" data-icon="copyright" width="1em" height="1em"
                  fill="currentColor" aria-hidden="true"><path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"></path></svg></span>
                  2022 长沙同学你好
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import captcha from '@/services/captcha/index'
import {isEmpty} from '@/utils/validate'
import {encryptByDES} from '@/utils/utils'
export default {
  data() {
    return {
      user: {
        code: "",
        uuid: "",
        username: "yykk",
        password: "123456"
      },
      // 用对象装验证码的数据
      captchaObj: {},
      show: false,
      info: "",   //用于保存登录失败后的提示信息
      errocode: {
        "500": {msg: "服务器出现问题!", field: "code"},
        "101100606": {msg: "请输入验证码", field: "code"},
        "101100605": {msg: "验证码输入有误", field: "code"},
        "101100604": {msg: "验证码不正确", field: "code"},
        "101100603": {msg: "请输入用户名", field: "username"},
        "101100602": {msg: "用户名或密码输入有误", field: "password"},
      }
    }
  },

  created() {
    // 1: 初始化验证码
    this.initCaptcha();
    // 2: 每隔4分钟刷新一次
    setInterval(() => {
      this.initCaptcha();
    }, 1000 * 60 * 4)
  },

  watch: {
    // 监听提示
    info: function () {
      // 清除上一次的定时器，如果不清楚自己去看效果，就会造成效果叠加
      if (this.stimer) clearInterval(this.stimer);
      // this.stimer是定时器对象，就是用来关闭用的
      this.stimer = setInterval(() => {
        this.show = false;
      }, 2000)
    }
  },

  methods: {
    // 初始化验证码
    initCaptcha() {
      // 获取服务器的验证码信息
      var promise = captcha();
      // 处理服务器返回的验证码数据信息
      promise.then(res => {
        // 接受服务器返回的验证码信息
        this.captchaObj = res.data.data;
        // 接受缓存的key,在登录的时候用于获取缓存的验证码
        this.user.uuid = this.captchaObj.token;
      })
    },

    // 登录逻辑
    toLogin() {
      this.show = false;
      if (isEmpty(this.user.username)) {
        this.show = true;
        this.info = "请输入用户名!!!";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.password)) {
        this.show = true;
        this.info = "请输入密码!!!";
        this.$refs.password.focus();
        return;
      }

      if (isEmpty(this.user.code)) {
        this.show = true;
        this.info = "请输入验证码!!!";
        this.$refs.code.focus();
        return;
      }

      this.user.password = encryptByDES(this.user.password)
      // 调用状态管理的方法dispatch这里掉actions commit是调用mutations方法
      var promise = this.$store.dispatch("login/logined", this.user);
      promise.then(() => {
        const params = this.$route.query.redirect;
        this.$router.push(params || "/toIndex");
      }, err => {
        this.show = true;
        const errorObj = this.errocode[err.status + ""];//{msg:"",field:"code"}
        this.info = errorObj.msg;
        this.user[errorObj.field] = "";
        this.$refs[errorObj.field].focus();
      })
    },

    // 点击改变验证码
    changecode() {
      this.initCaptcha()
    }

  }
}
</script>
<style>
.ksd-container {
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background-color: #fafbfc;
}

.login-page-new__main-bg {
  position: absolute;
  height: calc(100% - 17vh);
  width: 100%;
  top: 17vh;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  background: url(https://app-cdn.clickup.com/login__bg.8e44616319b55ac1.svg) center 10px no-repeat;
  background-size: cover;
}

.login-page-new__main-bg:before {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 300%;
  top: -100%;
  left: -50%;
  background: url(https://app-cdn.clickup.com/login__bg-dots.4777a8eaedc1248b.svg);
  transform: rotate(
    -28deg);
}

.login-page-new__main-bg:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(https://app-cdn.clickup.com/login__bg-top.f55110285bf7cd54.svg) center top no-repeat;
  background-size: 100%;
}
</style>
